<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--
        其他样式的ztree
        <link rel="stylesheet" type="text/css" href="/ztree/css/zTreeStyle/zTreeStyle.css">
        <link rel="stylesheet" href="/ztree/css/awesomeStyle/awesome.css"/>
    -->
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.exedit.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1100px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 130px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 100px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            background-color:rgb(243,243,243);
        }
        .query-top-right{
            float: right;
            margin-right: 30px;
        }
        .layui-form-label{
            width: 109px;
        }
        .layui-form-item .layui-input-inline {
            float: left;
            width: 180px;
            margin-right: 10px;
        }
        .record{
            width: 1650px;
            height: 821px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .import{
            margin-left: 870px;
        }
        #button_ids{
            display: none;
        }

        .record-right{
            width: 1350px;
            height: 700px;
            float: left;
        }
        .layui-table-cell {
            line-height: 47px;
            height: inherit;
        }
        .layui-table-cell>a{
            color:green;
        }
        .layui-table-fixed {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 101;
        }
        #rMenu {
            width: 48px;
            height: 97px;
            display: none;
        }
        .rMenuspan{
            width: 68px;
            height: 21px;
            line-height: 21px;
            font-size: 10px;
            border: 1px silver solid;
            margin: 1px;
            padding: 2px 6px;
            background-color: #DFDFDF;
        }
        img{
            width: 100px;
            height: 116px;
        }
    </style>
</head>
<body>
<div class="box">
    <!--商品列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">微圈审核列表</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" id="Refresh">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>
    <div style="padding-top: 10px; padding-left: 50px;">
        <button  onclick="AllMicroCircles()" type="button" class="layui-btn btn1" style="background-color: #FFFFFF;border: 1px silver solid; color: black;">全部审核(<span id="AllMicroCirclesVal"></span>)</button>
        <button  onclick="draft()" type="button" class="layui-btn btn2"  style="background-color: #FFFFFF;border: 1px silver solid; color: black;">草稿(<span id="draftVal"></span>)</button>
        <button  onclick="Submitted()" type="button" class="layui-btn btn3"  style="background-color: #FFFFFF;border: 1px silver solid; color: black;">已提交(<span id="SubmittedVal"></span>)</button>
        <button  onclick="Passed()" type="button" class="layui-btn btn4"  style="background-color: #FFFFFF;border: 1px silver solid; color: black;">已通过(<span id="PassedVal"></span>)</button>
    </div>
    <!--筛选查询-->
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                    <div class="query-top-right layui-btn" onclick="superSearch()">高级检索</div>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="layForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="artcleTitle" required lay-verify="required" placeholder="请输入文章名称" autocomplete="off" class="layui-input">
                            </div>

                            <label class="layui-form-label">微圈分类名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入用户名称" class="layui-input" name="artcleCategroyName"/>
                            </div>
                            <label class="layui-form-label">用户名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入要查询的账号" class="layui-input" name="userName"/>
                            </div>
                            <label class="layui-form-label">文章状态：</label>
                            <div class="layui-input-inline">
                                <select lay-filter="details" name="details">
                                    <option value="">请选择微圈状态</option>
                                    <option value="2">草稿</option>
                                    <option value="3">已通过</option>
                                    <option value="5">已提交</option>
                                </select>
                            </div>

                            <span>
                                <button type="reset" class="layui-btn query-top-right" style="background-color: #FFB800"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                                <div class="query-top-right layui-btn" onclick="search()"><i class="layui-icon layui-icon-search"></i>搜索</div>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--数据列表-->
    <div class="record">

        <div class="record-right">
            <!--表-->
            <table id="demoTable" lay-filter="demoTable"></table>
        </div>
    </div>
    <!--表头样式-->
    <div id="button_ids">
        <i class="layui-icon layui-icon-align-left"></i> 数据列表

    </div>


    <!-- 返回 -->
    <p id="title" style="display: none;">微圈审核列表</p>
</div>

<script>
    layui.use(['jquery','layer','table','form','upload'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var table=layui.table;
        var form=layui.form;
        var upload=layui.upload;
        anniu();
        function anniu(){
            $.ajax({
                url:"/JsMicrocircle/countDetails",
                data:{"details":2},
                type:'post',
                dataType:'json',
                success:function (data) {
                    if (data.data == null){
                        $("#draftVal").text(0);

                    } else{
                        $("#draftVal").text(data.data);
                        draftVal = data.data;
                    }

                }
            });

            $.ajax({
                url:"/JsMicrocircle/countDetails",
                data:{"details":3},
                type:'post',
                dataType:'json',
                success:function (data) {
                    if (data.data == null){
                        $("#PassedVal").text(0);
                    } else{
                        $("#PassedVal").text(data.data);
                        PassedVal = data.data;
                    }

                }
            });
            $.ajax({
                url:"/JsMicrocircle/countDetails",
                data:{"details":5},
                type:'post',
                dataType:'json',
                success:function (data) {
                    if (data.data == null){
                        $("#SubmittedVal").text(0);
                    } else{
                        $("#SubmittedVal").text(data.data);
                        SubmittedVal = data.data;
                    }

                }
            });
        }




        var layForm = {

        };
        //返回
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if(title == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });
        getTable(layForm);
        search = function search() {
            var layForm = form.val("layForm");
            layForm = {
                "artcleTitle":layForm.artcleTitle,
                "artcleCategroyName":layForm.artcleCategroyName,
                "userName":layForm.userName,
                "details":layForm.details
            };
            getTable(layForm);
        }
        superSearch = function superSearch() {
            layer.open({
                type:2,
                title:"高级检索",
                area:["700px","400px"],
                btn:["确定","取消"],
                content:"Administration-microCircle-superSearch.html",
                yes:function(index,layero){
                    var obj = layero.find('iframe').contents();
                    var artcleTitle = obj.find("#artcleTitle").val();
                    var artcleCategroyName = obj.find("#artcleCategroyName").val();
                    var details = obj.find("#details").val();
                    var userName = obj.find("#userName").val();
                    var layForm = {
                        "artcleTitle":artcleTitle,
                        "artcleCategroyName":artcleCategroyName,
                        "details":details,
                        "userName":userName
                    };
                    $.ajax({
                        url:"/JsMicrocircle/getJsMicrocircleSuperSearch",
                        data:layForm,
                        type:"post",
                        dataType:'json',
                        success:function (data) {
                            demoTable(data.data);
                            layer.close(index);
                        }
                    });

                },
                btn2:function(layero,index){

                }

            });
        }
        //刷新
        $("#Refresh").click(function () {
            location.reload();
        });
        draft = function draft(){
            $(".btn1").css("backgroundColor","#FFFFFF");
            $(".btn1").css("color","black");
            $(".btn2").css("backgroundColor","");
            $(".btn2").css("color","#FFFFFF");
            $(".btn3").css("backgroundColor","#FFFFFF");
            $(".btn3").css("color","black");
            $(".btn4").css("backgroundColor","#FFFFFF");
            $(".btn4").css("color","black");
            var layForm = {
                "details":2
            }
            getTable(layForm);
        }
        Submitted = function Submitted(){
            $(".btn1").css("backgroundColor","#FFFFFF");
            $(".btn1").css("color","black");
            $(".btn2").css("backgroundColor","#FFFFFF");
            $(".btn2").css("color","black");
            $(".btn3").css("backgroundColor","");
            $(".btn3").css("color","#FFFFFF");
            $(".btn4").css("backgroundColor","#FFFFFF");
            $(".btn4").css("color","black");
            var layForm = {
                "details":5
            }
            getTable(layForm);
        }
        Passed = function Passed(){
            $(".btn1").css("backgroundColor","#FFFFFF");
            $(".btn1").css("color","black");
            $(".btn2").css("backgroundColor","#FFFFFF");
            $(".btn2").css("color","black");
            $(".btn3").css("backgroundColor","#FFFFFF");
            $(".btn3").css("color","black");
            $(".btn4").css("backgroundColor","");
            $(".btn4").css("color","#FFFFFF");
            var layForm = {
                "details":3
            }
            getTable(layForm);
        }
        AllMicroCircles = function AllMicroCircles() {
            $(".btn1").css("backgroundColor","");
            $(".btn1").css("color","#FFFFFF");
            $(".btn2").css("backgroundColor","#FFFFFF");
            $(".btn2").css("color","black");
            $(".btn3").css("backgroundColor","#FFFFFF");
            $(".btn3").css("color","black");
            $(".btn4").css("backgroundColor","#FFFFFF");
            $(".btn4").css("color","black");
            var layForm = {
            }
            getTable(layForm);
        }
        $.ajax({
            url:"/JsMicrocircle/getJsMicrocircleByStatus",
            data:layForm,
            type:'post',
            dataType:"json",
            success:function (data) {
                $("#AllMicroCirclesVal").text(data.data.length);
            }
        });
        function getTable(layForm){
            $.ajax({
                url:"/JsMicrocircle/getJsMicrocircleByStatus",
                data:layForm,
                type:'post',
                dataType:"json",
                success:function (data) {
                    demoTable(data.data);
                }
            });
        }

        /*表格*/
        function demoTable(data){

            table.render({
                elem:'#demoTable',
                title:"微圈审核表",
                data:data,
                toolbar:'#button_ids',
                limit:5,
                width:1650,
                page:{
                    layout:['count','prev','page','next','limit','skip','refresh'],
                    limits:[10,20,30],
                    first:"首页",
                    last:"尾页",
                },
                cols:[[
                    {type:'checkbox'},
                    {field:"",title:"序号",align:'center',templet:function (data) {
                            return data.LAY_INDEX;
                        }},
                    {field:"userName",title:"用户昵称",align:'center'},
                    {field:"artcleTitle",title:"文章标题",align:'center'},
                    {field:"artcleUrl",title:"微圈图片",align:'center', templet:function (data) {
                            var areaContent;
                            var  start = data.article.indexOf("src")+5;
                            var  end = data.article.indexOf("alt")-2;
                            areaContent= data.article.substring(start,end);
                        if (data.artcleUrl !=areaContent| data.artcleUrl == '' | data.artcleUrl==null){
                            // return '<img src="http://101.200.239.240:80/group1/M00/00/07/rBmy-mG74E6AfN3ZAAALET0qU1I592.jpg" width="100px;" height="116px;"/>';
                             return '无图片';
                        } else{
                            return '<img src="'+data.artcleUrl+'" width="100px;" height="116px;"/>';
                        }

                    }},
                    {field:"createDate",title:"创建时间",align:'center'},
                    {field:"details",title:"微圈状态",align:'center',templet:function (data) {
                            if(data.details == "2"){
                                return "草稿";
                            }else if(data.details == "3"){
                                return "已通过";
                            }else if(data.details == "4"){
                                return "未提交";
                            }else if(data.details == "5"){
                                return "已提交";
                            }else if(data.details == "6"){
                                return "退回";
                            }
                        }},
                    {field:"releaseDate",title:"发布时间",align:'center'},
                    {field:"artcleCategroyName",title:"微圈分类",align:'center'},
                    {field:'',title:"操作",align:'center',templet:function (data) {
                            //toolbar:"#btnOperation",
                            if (data.details == "2") {
                                return ;
                            }else if(data.details == "3"){
                                return '<a alt="查看" title="查看" href="javascript:;"  style="margin-right: 10px" lay-event="selectTable" >查看</a>';
                            }else if (data.details == "5"){
                                return '<a alt="查看" title="查看" href="javascript:;"  style="margin-right: 10px" lay-event="selectTable" >查看</a>' +
                                    '<a alt="审核" title="审核" href="javascript:;" lay-event="check" >审核</a>';
                            }
                        }}
                ]]
            });

            table.on("tool(demoTable)",function (obj) {
                if (obj.event == "selectTable"){
                    layer.open({
                        type:2,
                        title:'微圈查看',
                        area:['95%','99%'],
                        Boolean:true,
                        maxmin:true,
                        offset:'auto',
                        btn:["确定","取消"],
                        content:"Administration-microCircle.html",
                        success:function (layero, index) {
                            var data = layero.find('iframe').contents();
                            data.find("#userName").text(obj.data.userName);
                            data.find("th[name=artcleTitle]").text(obj.data.artcleTitle);
                            data.find("th[name=userName]").text(obj.data.userName);
                            data.find("th[name=artcleCategroyName]").text(obj.data.artcleCategroyName);
                            data.find("th[name=releaseDate]").text(obj.data.releaseDate);
                            data.find("th[name=account]").text(obj.data.account);
                            data.find("th[name=artcleTitle]").text(obj.data.artcleTitle);
                            data.find("th[name=article]").html(obj.data.article);
                            data.find("th[name=createDate]").html(obj.data.createDate);
                            localStorage.setItem("artcleUrl",obj.data.artcleUrl);
                            localStorage.setItem("userAcatarUrl",obj.data.userAcatarUrl);
                            data.find("th[name=acticleHits]").text(obj.data.acticleHits);
                            data.find("th[name=acticleLike]").text(obj.data.acticleLike);
                            data.find("th[name=acticleReviews]").text(obj.data.acticleReviews);
                            data.find("th[name=acticleShare]").text(obj.data.acticleShare);
                            var user = localStorage.getItem("user");
                            user = JSON.parse(user);
                            data.find("input[name=trueName]").val(user.data.trueName);
                            data.find("input[name=account]").val(user.data.account);
                            data.find("input[name=userId]").val(user.data.userId);



                        }
                    })

                }else{
                    layer.open({
                        type:2,
                        title:'微圈审核',
                        area:["800px","400px"],
                        content:"Administration-microCircle-examine.html",
                        success:function (layero,index) {
                            var user = JSON.parse(localStorage.getItem("user"));
                            var objIframe = layero.find('iframe').contents();
                            objIframe.find("#implementId").val(user.data.userId);
                            objIframe.find("#courseId").val(obj.data.microcircleId);
                            objIframe.find("#type").val(5);
                        },
                        end:function (layero, index) {
                            var layForm = {

                            };
                            getTable(layForm);
                            anniu();

                        }
                    })
                }
            });



        }







        //现在时间
        function getTime(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            var dateStr = year+"-"+zeroFilling(month)+"-"+zeroFilling(day)+" "+zeroFilling(hour)+":"+zeroFilling(minute)+":"+zeroFilling(second);
            return dateStr;
        }
        function zeroFilling(data){
            if(data<10){
                data="0"+data;
            }
            return data;
        }
    })
</script>
</body>
</html>